<template>
  <Layout>
    <Header style="width: 100%; margin-top: -2%">
      <MyHeader />
    </Header>
    <Content>
      <div>
        <el-row :gutter="0">
          <!-- 左侧新添测试用例 -->
          <el-col :span="12"
            ><div class="grid-content-url bg-purple">
              <div style="margin-top: 20px; margin-bottom: 40px; height: 85%">
                <span class="urlStyle">流媒体地址：</span>
                <el-input v-model="input" style="width: 50%; margin-top: 20px">
                </el-input>
                <el-button round @click="addUrl" style="margin-left: 20px"
                  >插入</el-button
                >
                <div>
                  <el-button
                    @click="reloadUrl"
                    style="
                      margin-left: 20px;
                      margin-top: 30px;
                      margin-bottom: 30px;
                    "
                    >重载测试用例</el-button
                  >
                  <el-button
                    @click="emptyUrl"
                    style="
                      margin-left: 20px;
                      margin-top: 30px;
                      margin-bottom: 30px;
                    "
                    >清空测试用例</el-button
                  >
                </div>
                <div style="height: 85%">
                  <!-- <span class="urlStyle">测试用例列表</span> -->
                  <TestItemTable></TestItemTable>
                </div>
              </div></div
          ></el-col>
          <!-- 右侧开始测试用例 -->
          <el-col :span="12"
            ><div class="grid-content-url bg-purple">
              <div style="margin-top: 20px; margin-bottom: 40px">
                <!-- <span class="urlStyle">流媒体地址：</span>
                <el-input v-model="input" style="width:50%;margin-top:20px">
                </el-input>
                <el-button round @click="addUrl" style="margin-left:20px"
                  >插入</el-button
                > -->
                <el-button
                  ref="btn1"
                  @click="startTestUrl"
                  style="
                    margin-left: 30px;
                    margin-top: 20px;
                    margin-bottom: 30px;
                  "
                  >开始测试</el-button
                >
                <div style="height: 85%">
                  <!-- <span class="urlStyle">测试结果表</span> -->
                  <TestResultTable></TestResultTable>
                </div>
              </div></div
          ></el-col>
        </el-row>
      </div>
    </Content>
  </Layout>
</template>

<script>
import MyHeader from "./Header.vue";
import TestItemTable from "./urlTable/testItemTable";
import TestResultTable from "./urlTable/testResultTable";
// import TextBox from "./textBox";

import { mapState, mapActions } from "vuex";

export default {
  components: {
    MyHeader,
    TestItemTable,
    TestResultTable,
    // TextBox
  },
  data() {
    return {
      input: "",
      stuname: "重新测试",
    };
  },
  computed: {
    ...mapState([
      "addReturnMsg",
      "reloadReturnMsg",
      "emptyReturnCode",
      "startTesteturnMsg",
    ]),
  },
  mounted() {
    // this.getCamNum();
  },
  methods: {
    ...mapActions([
      "addUrlInfo",
      "reloadUrlInfo",
      "emptyUrlInfo",
      "queryTestItemList",
      "startTestUrlInfo",
    ]),
    addUrl() {
      //插入测试用例
      let sendParams = {
        url: this.input,
      };
      console.log("sendParams：", sendParams);
      this.addUrlInfo(sendParams);

      var that = this;
      setTimeout(function () {
        if (that.addReturnMsg == "成功") {
          that.$message({
            message: "插入成功！",
            type: "success",
          });
        } else if (that.addReturnMsg == "失败") {
          that.$message.error("插入失败！");
        }
      }, 500);
    },
    reloadUrl() {
      //重载测试用例
      this.reloadUrlInfo();

      var that = this;
      setTimeout(function () {
        console.log("that.reloadReturnMsg", that.reloadReturnMsg);
        if (that.reloadReturnMsg == "成功") {
          that.$message({
            message: "重载成功！",
            type: "success",
          });
        } else if (that.reloadReturnMsg == "失败") {
          that.$message.error("重载失败！");
        }
        // this.queryTestItemList();
      }, 500);
    },
    emptyUrl() {
      //清空测试用例
      this.emptyUrlInfo();

      // var that = this;
      // setTimeout(function() {
      //   console.log("$$$$$$$$$$$$that.emptyReturnCode", that.emptyReturnCode);
      //   if (that.emptyReturnCode == 200) {
      //     that.$message({
      //       message: "清空成功！",
      //       type: "success"
      //     });
      //   } else {
      //     that.$message.error("清空失败！");
      //   }
      //   // this.queryTestItemList();
      // }, 3000);
    },
    startTestUrl() {
      //开始测试用例
      this.startTestUrlInfo();
      //再次触发后按键文字修改
      var name = this.stuname;
      // this.stuname = this.$refs.btn1.$el.innerText;
      //this.$refs.btn1是取上面id为btn1的元素（说id是不严谨的）
      this.$refs.btn1.$el.innerText = name;

      var that = this;
      setTimeout(function () {
        console.log("that.startTesteturnMsg", that.startTesteturnMsg);
        if (that.startTesteturnMsg == "成功") {
          that.$message({
            message: "开始测试成功！",
            type: "success",
          });
        } else if (that.startTesteturnMsg == "失败") {
          that.$message.error("开始测试失败！");
        }
        // this.queryTestItemList();
      }, 500);
    },
  },
};
</script>

<style>
.urlStyle {
  font-size: 23px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  /* float: left; */
  line-height: 40px;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box;
  color: #0d285d;
  margin-left: 25px;
}
legend {
  font-weight: 800;
  font-size: 19px !important;
}
.el-message {
  font-size: 25px !important;
}
.el-message__content {
  font-size: 18px !important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
  background: rgba(211, 220, 230, 0.8);
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content-url {
  /* height: auto !important; */
  height: 940px !important;
  min-height: 940px !important;
  border-radius: 4px;
  min-height: 36px;
  margin-left: 20px;
  margin-right: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-input--suffix {
  /* width: 500px !important; */
}
.el-select-dropdown__item {
  font-size: 20px !important;
}
.el-form-item__label {
  color: #0d285d !important;
  font-size: 20px !important;
}
.el-input__inner {
  font-size: 20px !important;
}
.el-button {
  color: #0d285d !important;
  font-weight: bold !important;
  font-size: 19px !important;
}
.el-row {
  margin-bottom: 10px;
}
.el-card__body {
  padding-top: 0px !important;
}
.el-card__header {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
/* 修改placeholder字体颜色 */
input::-webkit-input-placeholder {
  /*WebKit browsers*/
  color: rgb(128, 123, 123) !important;
}

input::-moz-input-placeholder {
  /*Mozilla Firefox*/
  color: rgb(128, 123, 123) !important;
}

input::-ms-input-placeholder {
  /*Internet Explorer*/
  color: rgb(128, 123, 123) !important;
}
</style>
